<template>
  <div class="registration-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <h1>报名入口</h1>
        <p class="subtitle">各院校提前招生报名入口汇总</p>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="container">
      <!-- 面包屑导航 -->
      <Breadcrumb />
      
      <div class="main-content">
        <!-- 重要通知 -->
        <el-alert
          title="2025年浙江高职提前招生报名入口"
          type="info"
          :closable="false"
          show-icon
          class="notice-alert"
        >
          <template #default>
            <div class="notice-content">
              <p><strong>注意：</strong>2025年报名入口已开放，考生请注意报名时间</p>
              <p>
                <el-link 
                  href="#" 
                  type="primary" 
                  :underline="false"
                  @click="viewRegistrationGuide"
                >
                  查看报名流程（点击）
                </el-link>
              </p>
            </div>
          </template>
        </el-alert>

        <!-- 筛选条件 -->
        <el-card class="filter-card" shadow="never">
          <el-form :inline="true" :model="filterForm">
            <el-form-item label="学校名称">
              <el-input 
                v-model="filterForm.schoolName" 
                placeholder="请输入学校名称" 
                clearable 
                style="width: 200px"
                @change="loadRegistrationEntries"
              />
            </el-form-item>
            <el-form-item label="年度">
              <el-select 
                v-model="filterForm.year" 
                placeholder="选择年度" 
                clearable 
                style="width: 120px"
                @change="loadRegistrationEntries"
              >
                <el-option :value="2025" label="2025年" />
                <el-option :value="2024" label="2024年" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadRegistrationEntries">搜索</el-button>
              <el-button @click="resetFilter">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 报名入口表格 -->
        <el-card class="table-card" shadow="never">
          <template #header>
            <div class="card-header">
              <h2><el-icon><School /></el-icon> 报名入口列表</h2>
              <div class="header-info">
                <el-tag type="warning">
                  <el-icon><Warning /></el-icon>
                  请在规定时间内完成报名
                </el-tag>
              </div>
            </div>
          </template>

          <el-table 
            v-loading="loading" 
            :data="registrationEntries" 
            stripe 
            style="width: 100%"
            :row-class-name="tableRowClassName"
            :header-cell-style="{ 'background-color': '#f5f7fa', 'color': '#303133', 'font-weight': '500' }"
          >
            <el-table-column 
              prop="schoolName" 
              label="高职提招院校" 
              min-width="320"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                <div class="school-name">{{ row.schoolName }}</div>
              </template>
            </el-table-column>
            <el-table-column 
              label="2025年报名时间" 
              width="180"
              align="center"
            >
              <template #default="{ row }">
                <div class="registration-time">
                  {{ row.registrationStartTime }} 至 {{ row.registrationEndTime }}
                </div>
              </template>
            </el-table-column>
            <el-table-column 
              label="报名入口" 
              width="130"
              align="center"
              fixed="right"
            >
              <template #default="{ row }">
                <el-button 
                  v-if="row.registrationUrl && row.registrationUrl !== '#'"
                  type="primary" 
                  size="small"
                  @click="goToRegistration(row)"
                  class="action-btn"
                >
                  <el-icon><Link /></el-icon>
                  点击报名
                </el-button>
                <div v-else class="no-link">暂无链接</div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-wrapper" v-if="pagination.total > 0">
            <el-pagination
              v-model:current-page="pagination.page"
              v-model:page-size="pagination.size"
              :total="pagination.total"
              :page-sizes="[10, 20, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="loadRegistrationEntries"
              @current-change="loadRegistrationEntries"
            />
          </div>

          <!-- 空状态 -->
          <el-empty 
            v-if="!loading && registrationEntries.length === 0"
            description="暂无报名入口信息"
            :image-size="120"
          />
        </el-card>

        <!-- 报名须知 -->
        <el-card class="notice-card" shadow="never">
          <template #header>
            <h2><el-icon><InfoFilled /></el-icon> 报名须知</h2>
          </template>
          <div class="notice-content">
            <el-row :gutter="20">
              <el-col :span="12">
                <h3>报名条件</h3>
                <ul>
                  <li>具有浙江省户籍或在浙江省就读的应届高中毕业生</li>
                  <li>遵守中华人民共和国宪法和法律</li>
                  <li>高中阶段学习成绩优良</li>
                  <li>身体健康状况符合相关专业要求</li>
                </ul>
              </el-col>
              <el-col :span="12">
                <h3>报名流程</h3>
                <ol>
                  <li>点击对应学校的"报名"按钮</li>
                  <li>跳转到学校官方报名系统</li>
                  <li>按要求填写报名信息</li>
                  <li>提交报名申请并缴费</li>
                  <li>关注后续考试安排</li>
                </ol>
              </el-col>
            </el-row>
            
            <el-alert
              title="温馨提示"
              type="warning"
              :closable="false"
              show-icon
              style="margin-top: 20px"
            >
              <p>1. 请在报名截止时间前完成报名，逾期不予受理</p>
              <p>2. 报名信息务必真实准确，如有虚假将取消报名资格</p>
              <p>3. 如有疑问，请直接联系相关院校招生办</p>
            </el-alert>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { School, Warning, InfoFilled, Link } from '@element-plus/icons-vue'
import Breadcrumb from '@/components/Breadcrumb.vue'
import api from '@/api'

// 响应式数据
const loading = ref(false)
const registrationEntries = ref([])

const filterForm = reactive({
  schoolName: '',
  year: null
})

const pagination = reactive({
  page: 1,
  size: 20,
  total: 0
})

// 方法
const loadRegistrationEntries = async () => {
  loading.value = true
  try {
    const { data } = await api.get('/annual-enrollment/by-type', { 
      params: { 
        year: filterForm.year || 2025,
        type: 'registration'
      } 
    })
    
    let entries = data || []
    
    // 客户端筛选
    if (filterForm.schoolName) {
      entries = entries.filter(entry => 
        entry.schoolName && entry.schoolName.includes(filterForm.schoolName))
    }
    
    // 分页处理
    const start = (pagination.page - 1) * pagination.size
    const end = start + pagination.size
    registrationEntries.value = entries.slice(start, end)
    pagination.total = entries.length
  } catch (error) {
    ElMessage.error('加载失败')
  } finally {
    loading.value = false
  }
}

const resetFilter = () => {
  Object.assign(filterForm, {
    schoolName: '',
    year: null
  })
  pagination.page = 1
  loadRegistrationEntries()
}

const goToRegistration = (row) => {
  if (row.registrationUrl) {
    // 在新窗口打开报名链接
    window.open(row.registrationUrl, '_blank')
  }
}

// 查看报名流程
const viewRegistrationGuide = () => {
  // 临时使用JavaScript alert，后续可配置为跳转到指定页面
  ElMessage.info('报名流程详情功能开发中，请关注各院校官方网站公布的报名流程')
  
  // 后续可以改为：
  // window.open('/guide/registration-process', '_blank')
  // 或者：
  // router.push('/admission/guidelines')
}

// 获取报名状态类型（用于tag颜色）
const getStatusType = (row) => {
  const now = new Date()
  const currentMonth = now.getMonth() + 1 // getMonth() 返回 0-11
  const currentDay = now.getDate()
  
  // 简单判断：3月1日-4月10日为报名期
  if (currentMonth === 3 || (currentMonth === 4 && currentDay <= 10)) {
    return 'success'
  } else if (currentMonth < 3 || (currentMonth === 2 && currentDay > 20)) {
    return 'warning'
  } else {
    return 'info'
  }
}

// 获取报名状态文本
const getStatusText = (row) => {
  const now = new Date()
  const currentMonth = now.getMonth() + 1
  const currentDay = now.getDate()
  
  if (currentMonth === 3 || (currentMonth === 4 && currentDay <= 10)) {
    return '报名中'
  } else if (currentMonth < 3 || (currentMonth === 2 && currentDay > 20)) {
    return '即将开始'
  } else {
    return '已结束'
  }
}

// 表格行样式
const tableRowClassName = ({ row }) => {
  const statusType = getStatusType(row)
  if (statusType === 'success') return 'success-row'
  if (statusType === 'warning') return 'warning-row'
  return ''
}

// 初始化
onMounted(() => {
  loadRegistrationEntries()
})
</script>

<style lang="scss" scoped>
.registration-page {
  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
    
    h1 {
      font-size: 2.5rem;
      margin-bottom: 16px;
      font-weight: 600;
    }
    
    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
    }
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .main-content {
    margin-top: -40px;
    position: relative;
    z-index: 1;
    
    .el-card {
      margin-bottom: 30px;
      border-radius: 12px;
      
      .el-card__header {
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        
        h2 {
          margin: 0;
          color: #495057;
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }
    }
    
    .notice-alert {
      margin-bottom: 20px;
      
      .notice-content {
        p {
          margin: 8px 0;
          font-size: 14px;
          
          &:first-child {
            margin-top: 0;
          }
          
          &:last-child {
            margin-bottom: 0;
          }
        }
        
        .el-link {
          font-weight: 500;
          
          &:hover {
            color: #409eff;
          }
        }
      }
    }
    
    .filter-card {
      .el-form {
        margin: 0;
      }
    }
    
    .table-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .header-info {
          .el-tag {
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }
      }
      
      .pagination-wrapper {
        margin-top: 20px;
        text-align: right;
      }
      
      .no-link {
        color: #909399;
        font-size: 13px;
        background: #f5f7fa;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 6px 12px;
        display: inline-block;
        min-width: 70px;
        text-align: center;
      }
      
      .school-name {
        font-weight: 500;
        color: #303133;
        font-size: 14px;
      }
      
      .registration-time {
        color: #606266;
        font-size: 14px;
        white-space: nowrap;
      }
      
      .action-btn {
        min-width: 90px;
      }
      
      :deep(.el-table) {
        border: 1px solid #e4e7ed;
        border-radius: 8px;
        overflow: hidden;
        
        .el-table__header-wrapper {
          th {
            border-bottom: 2px solid #e4e7ed;
          }
        }
        
        .el-table__body-wrapper {
          .el-table__row {
            &:hover {
              background-color: #f5f7fa;
            }
            
            td {
              border-bottom: 1px solid #f0f2f5;
              padding: 16px 0;
              vertical-align: middle;
            }
          }
        }
        
        .cell {
          padding: 0 10px;
          line-height: 1.6;
        }
      }
    }
    
    .notice-card {
      .notice-content {
        h3 {
          margin-top: 0;
          margin-bottom: 16px;
          color: #2c3e50;
          font-size: 16px;
        }
        
        ul, ol {
          padding-left: 20px;
          
          li {
            margin-bottom: 8px;
            line-height: 1.6;
            color: #6c757d;
          }
        }
      }
    }
  }
}

// 表格行样式
:deep(.el-table) {
  .success-row {
    background-color: #f0f9ff;
  }
  
  .warning-row {
    background-color: #fffbf0;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .registration-page {
    .page-header {
      padding: 40px 0;
      
      h1 {
        font-size: 2rem;
      }
      
      .subtitle {
        font-size: 1rem;
      }
    }
    
    .filter-card {
      .el-form {
        .el-form-item {
          display: block;
          margin-right: 0;
          margin-bottom: 16px;
        }
      }
    }
    
    .table-card {
      .card-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }
    }
  }
}
</style>